CSS @define-mixin: Korduvkasutatavate ja parameetritega stiilide tulevik

Üle kümne aasta on CSS-i arendusmaailma domineerinud üks põhimõtteline väljakutse: skaleeritavus. Kui projektid kasvavad lihtsatest veebilehtedest keerukateks globaalseteks rakendusteks, muutub stiililehtede haldamine hirmuäratavaks ülesandeks. Korduvus, ebajärjekindlus ja koodi maht võivad kiiresti viia selleni, mida sageli nimetatakse "CSS-i võlaks". Selle vastu võitlemiseks lõi arendajate kogukond võimsad tööriistad: CSS-i eelprotsessorid nagu Sass, Less ja Stylus. Need tööriistad tõid traditsioonilisest programmeerimisest pärit kontseptsioonid – muutujad, funktsioonid ja, mis kõige tähtsam, mixin'id – CSS-i.

Eriti mixin'id muutsid mängu. Need võimaldasid arendajatel defineerida korduvkasutatavaid stiiliplokke, mida sai lisada kõikjale, sageli parameetritega nende väljundi kohandamiseks. See tõi stiililehtedele ihaldatud DRY (Don't Repeat Yourself) põhimõtte. Kuid sellel võimsusel oli oma hind: kohustuslik kompileerimise samm. Teie kood ei olnud enam lihtsalt CSS; see oli teine keel, mis tuli kompileerida CSS-iks, enne kui veebilehitseja sellest aru sai.

Aga mis siis, kui meil oleks mixin'ite võimekus ilma eelprotsessorita? Mis siis, kui see võimekus oleks ehitatud otse CSS-i keelde endasse? See on @define-mixin'i lubadus, uus ja põnev ettepanek, mis on teel läbi CSS-i töörühma. See artikkel pakub põhjaliku ülevaate @define-mixin'ist, alates selle põhisüntaksist kuni selle potentsiaalse mõjuni veebiarenduse tulevikule.

Miks natiivsed mixin'id? Põhjendus eelprotsessoritest edasi liikumiseks

Enne süntaksisse sukeldumist on oluline mõista 'miksi'. Miks me vajame mixin'eid CSS-is, kui eelprotsessorid on meid nii kaua nii hästi teeninud? Vastus peitub veebiplatvormi arengus.

DRY põhimõte CSS-is

Mõelge lihtsale, levinud stsenaariumile: ühtse visuaalse stiili loomine keelatud nuppudele kogu teie rakenduses. Teil võivad olla sellised stiilid:

            .button:disabled,
.input[type="submit"]:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  border: 1px solid #999999;
  opacity: 0.7;
}
            

              
                Copy
              
            
          

Kujutage nüüd ette, et teil on ka ankrulingid, mis on stiilitud nuppudeks ja vajavad keelatud olekut klassi kaudu:

            .button.is-disabled,
.link-as-button.is-disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  border: 1px solid #999999;
  opacity: 0.7;
}
            

              
                Copy
              
            
          

Kogu deklaratsioonide plokk on korratud. Kui keelatud oleku disain muutub, peate selle leidma ja uuendama mitmes kohas. See on ebatõhus ja vigadele altis. Sassi mixin lahendab selle elegantselt:

            // Sassi näide
@mixin disabled-state {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  border: 1px solid #999999;
  opacity: 0.7;
}

.button:disabled, .input[type="submit"]:disabled {
  @include disabled-state;
}

.button.is-disabled, .link-as-button.is-disabled {
  @include disabled-state;
}
            

              
                Copy
              
            
          

See on puhas, hooldatav ja DRY. @define-mixin'i eesmärk on tuua täpselt see võimekus natiivsesse CSS-i.

Tööriistade lisakoormus

Kuigi eelprotsessorid on võimsad, lisavad nad abstraktsioonikihi ja sõltuvuse. Iga projekt vajab:

• Kompileerimisprotsess: Teil on vaja kompileerimisvahendit nagu Webpack, Vite või Parcel, mis on konfigureeritud teie Sass/Less-failide kompileerimiseks.
• Sõltuvused: Teie projekt sõltub nüüd eelprotsessori paketist ja kompileerimisvahendist endast, lisades need `node_modules` kausta.
• Aeglasem tagasiside tsükkel: Kuigi kaasaegsed tööriistad on uskumatult kiired, on faili salvestamise ja tulemuse brauseris nägemise vahel siiski kompileerimise samm.
• Eraldatus platvormist: Eelprotsessori funktsioonid ei suhtle brauseriga dünaamiliselt. Näiteks Sassi muutujat ei saa käitusajal uuendada samamoodi nagu CSS-i kohandatud omadust (Custom Property).

Muutes mixin'id natiivseks funktsiooniks, eemaldab CSS selle lisakoormuse. Teie kood on algusest peale brauserivalmis, lihtsustades tööriistakette ja tuues stiililoogika lähemale platvormile, millel see töötab.

Süntaksi lahkamine: Kuidas @define-mixin töötab

Pakutud süntaks CSS-i mixin'ite jaoks on tahtlikult otsekohene ja loodud tunduma CSS-i keele loomuliku osana. See koosneb kahest peamisest at-reeglist: @define-mixin mixin'i defineerimiseks ja @mixin selle rakendamiseks.

Põhilise mixin'i defineerimine

Mixin'i defineerite kasutades @define-mixin at-reeglit, millele järgneb kohandatud identifikaator (mixin'i nimi) ja CSS-i deklaratsioonide plokk.

            /* Defineeri mixin nimega 'disabled-state' */
@define-mixin disabled-state {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.7;
}
            

              
                Copy
              
            
          

Mixin'i rakendamine @mixin'iga

Mixin'i kasutamiseks kasutate stiilireegli sees @mixin at-reeglit, millele järgneb selle mixin'i nimi, mida soovite rakendada.

            .button:disabled {
  /* Rakenda deklaratsioonid mixin'ist 'disabled-state' */
  @mixin disabled-state;
}
            

              
                Copy
              
            
          

Kui brauser seda CSS-i parsib, asendab see tegelikult @mixin disabled-state; mixin'i sees defineeritud deklaratsioonidega. Tulemuseks olev arvutatud stiil keelatud nupu jaoks oleks justkui oleksite deklaratsioonid otse kirjutanud.

Võimsuse lisamine parameetritega

Mixin'ite tõeline võimsus avaneb parameetrite kasutamisega. See võimaldab teil edastada väärtusi mixin'isse, et kohandada selle väljundit, muutes selle uskumatult mitmekülgseks. Parameetrid defineeritakse sulgudes pärast mixin'i nime, sarnaselt funktsioonile JavaScriptis.

Loome mixin'i paindliku flexbox-konteineri genereerimiseks:

            /* Parameetritega mixin flexbox'i joondamiseks */
@define-mixin flex-center($justify, $align) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
}
            

              
                Copy
              
            
          

Selle mixin'i rakendamisel edastate argumente parameetritele:

            .container {
  /* Tsentreeri sisu horisontaalselt ja vertikaalselt */
  @mixin flex-center(center, center);
}

.sidebar {
  /* Joonda sisu algusesse, aga venita elemendid laiali */
  @mixin flex-center(flex-start, stretch);
}
            

              
                Copy
              
            
          

See üksainus mixin suudab nüüd hallata mitmeid paigutuse stsenaariume, edendades järjepidevust ja vähendades koodi kordamist.

Paindlik vaikimisi: Vaikimisi väärtuste kasutamine

Mõnikord on parameetril levinud või vaikimisi väärtus. Süntaks võimaldab teil määrata parameetritele vaikimisi väärtused, muutes need mixin'i kutsumisel valikuliseks.

Parandame oma `flex-center` mixin'it. Sageli soovite sisu tsentreerida mõlemas suunas. Saame teha `center`'ist vaikimisi väärtuse.

            /* Vaikimisi parameetrite väärtustega mixin */
@define-mixin flex-center($justify: center, $align: center) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
}
            

              
                Copy
              
            
          

Nüüd muutub selle kasutamine veelgi lihtsamaks:

            .perfectly-centered-box {
  /* Argumente pole vaja; kasutab vaikimisi väärtusi 'center', 'center' */
  @mixin flex-center;
}

.start-aligned-box {
  /* Kirjuta üle esimene parameeter, kasuta teise jaoks vaikimisi väärtust */
  @mixin flex-center(flex-start);
}
            

              
                Copy
              
            
          

See funktsioon muudab mixin'id robustsemaks ja arendajasõbralikumaks, kuna peate esitama väärtusi ainult nende parameetrite jaoks, mida soovite nende vaikimisi väärtustest muuta.

Praktilised rakendused: Pärismaailma probleemide lahendamine @define-mixin'iga

Teooria on tore, aga vaatame, kuidas @define-mixin saab lahendada levinud, igapäevaseid väljakutseid, millega arendajad üle maailma silmitsi seisavad.

Näide 1: Skaleeritav tüpograafiasüsteem

Tüpograafia järjepidev haldamine suures rakenduses, eriti tundlikus (responsive), on keeruline. Mixin aitab kehtestada selged tüpograafilised reeglid.

            /* Defineeri tekstistiili mixin */
@define-mixin text-style($size, $weight: 400, $color: #333) {
  font-size: $size;
  font-weight: $weight;
  color: $color;
  line-height: 1.5;
}

/* Rakenda tekstistiilid */
h1 {
  @mixin text-style(2.5rem, 700);
}

p {
  /* Kasuta vaikimisi kaalu ja värvi */
  @mixin text-style(1rem);
}

.caption {
  @mixin text-style(0.875rem, 400, #777);
}
            

              
                Copy
              
            
          

See lähenemine tagab, et kõik tekstielemendid jagavad ühtset alust (nagu `line-height`), võimaldades samal ajal põhiomaduste lihtsat kohandamist. See tsentraliseerib tüpograafilise loogika, muutes kogu saidi hõlmavad uuendused tühiseks.

Näide 2: Robustne nuppude variatsioonide süsteem

Veebisaidid vajavad sageli mitut nupuvariatsiooni: esmane, teisene, edukas, ohtlik jne. Mixin on ideaalne nende variatsioonide genereerimiseks ilma ühiseid põhistiile kordamata.

            /* Nupu põhistiilid */
.btn {
  display: inline-block;
  padding: 0.75em 1.5em;
  border-radius: 4px;
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Mixin nupuvariantide genereerimiseks */
@define-mixin button-variant($bg, $text-color, $border-color: $bg) {
  background-color: $bg;
  color: $text-color;
  border-color: $border-color;

  &:hover {
    opacity: 0.85;
  }
}

/* Genereeri variandid */
.btn-primary {
  @mixin button-variant(#007bff, #ffffff);
}

.btn-secondary {
  @mixin button-variant(#6c757d, #ffffff);
}

.btn-outline-success {
  /* Keerukam variant läbipaistva taustaga */
  @mixin button-variant(transparent, #28a745, #28a745);
}
            

              
                Copy
              
            
          

Märkus: Pesastamise selektori `&` kasutamine mixin'i sees on osa ettepanekust, peegeldades selle funktsionaalsust Sassis ja võimaldades stiile pseudoklassidele nagu `:hover`.

Näide 3: Temaatiliste komponendi olekute loomine

Mõelge teavitus- või märguandekomponendile, millel võib olla erinevaid olekuid (info, edu, hoiatus, viga). Mixin saab genereerida nende olekute värviskeemid ühest teemavärvist.

            @define-mixin alert-theme($theme-color) {
  background-color: color-mix(in srgb, $theme-color 15%, transparent);
  color: color-mix(in srgb, $theme-color 85%, black);
  border-left: 5px solid $theme-color;
}

/* Genereeri teavituste stiilid */
.alert-info {
  @mixin alert-theme(blue);
}

.alert-success {
  @mixin alert-theme(green);
}

.alert-warning {
  @mixin alert-theme(orange);
}

.alert-error {
  @mixin alert-theme(red);
}
            

              
                Copy
              
            
          

See näide demonstreerib ka seda, kuidas natiivsed mixin'id saavad võimsalt kombineeruda teiste kaasaegsete CSS-i funktsioonidega, nagu `color-mix()` funktsioon, et luua väga dünaamilisi ja hooldatavaid stiilisüsteeme.

Võrdlev analüüs: @define-mixin vs. alternatiivid

Et täielikult mõista @define-mixin'i rolli, on kasulik seda võrrelda teiste funktsioonidega, nii olemasolevate kui ka ajaloolistega.

@define-mixin vs. CSS-i kohandatud omadused (muutujad)

See on kõige olulisem eristus, mida mõista. Kohandatud omadused on mõeldud väärtuste jaoks, samas kui mixin'id on mõeldud deklaratsioonide plokkide jaoks.

• Kohandatud omadused: Salvestavad ühe väärtuse (nt värvi, suuruse, stringi). Need on dünaamilised ja neid saab käitusajal JavaScriptiga muuta. Need sobivad suurepäraselt teemade loomiseks ja disainisüsteemide tokeniseerimiseks.
• Mixin'id: Salvestavad ühe või mitme CSS-i deklaratsiooni kogumi. Need on staatilised ja neid töödeldakse CSS-i parsimisel. Need on mõeldud omaduste mustrite abstraheerimiseks.

Te ei saa kasutada kohandatud omadust reeglite ploki salvestamiseks. Näiteks see on kehtetu:

            :root {
  --centered-flex: {
    display: flex;
    align-items: center;
  } /* See ei tööta! */
}

.container {
  @apply --centered-flex; /* @apply on samuti aegunud */
}
            

              
                Copy
              
            
          

Need ei ole konkureerivad funktsioonid; need on täiendavad. Tegelikult kasutavad parimad süsteemid neid koos. Saate edastada kohandatud omaduse argumendina mixin'ile:

            :root {
  --primary-color: #007bff;
  --text-on-primary: #ffffff;
}

@define-mixin button-variant($bg, $text-color) {
  background-color: $bg;
  color: $text-color;
}

.btn-primary {
  @mixin button-variant(var(--primary-color), var(--text-on-primary));
}
            

              
                Copy
              
            
          

@define-mixin vs. Sassi/Lessi mixin'id

Natiivsed mixin'id on tugevalt inspireeritud nende eelprotsessorite vastetest, kuid on olulisi erinevusi:

• Täitmiskontekst: Sassi mixin'eid töödeldakse kompileerimise ajal. Natiivseid mixin'eid töötleb brauser parsimise ajal. See tähendab, et natiivsetel mixin'itel pole kompileerimise sammu.
• Funktsioonide komplekt: Eelprotsessorid sisaldavad sageli mixin'ites keerukamat loogikat, nagu tsüklid (@each), tingimuslaused (@if) ja keerulised funktsioonid. Natiivsete mixin'ite esialgne ettepanek on rohkem keskendunud korduvkasutatavatele deklaratsiooniplokkidele ja ei pruugi seda täiustatud loogikat sisaldada.
• Koostöövõime: Natiivsed mixin'id saavad sujuvalt suhelda teiste natiivsete CSS-i funktsioonidega nagu `var()` ja `color-mix()` viisil, mida eelprotsessorid, olles sammu võrra eemal, ei suuda alati nii elegantselt teha.

Paljude kasutusjuhtude puhul on natiivsed mixin'id otseseks asenduseks eelprotsessorite mixin'itele. Väga keerukate, loogikapõhiste stiililehtede jaoks võivad eelprotsessorid siiski eelise säilitada, vähemalt esialgu.

@define-mixin vs. aegunud @apply

Mõned võivad mäletada @apply reeglit, mis oli osa varasemast CSS-i kohandatud omaduste spetsifikatsioonist. Selle eesmärk oli lahendada sarnane probleem, kuid see aegus lõpuks oluliste tehniliste väljakutsete tõttu. See võimaldas rakendada kohandatud omadusse salvestatud reeglikomplekti, kuid see tekitas suuri probleeme CSS-i kaskaadi, spetsiifilisuse ja jõudlusega. !important'i või vastuoluliste omaduste tulemuse määramine @apply plokis osutus ületamatult keeruliseks.

@define-mixin on värske, robustsem lähenemine. Selle asemel, et proovida suruda stiiliplokki muutujasse, loob see spetsiaalse, hästi defineeritud mehhanismi stiilide kaasamiseks. Brauser kopeerib deklaratsioonid tegelikult reeglisse, mis on palju lihtsam ja ennustatavam mudel, mis väldib @apply kaskaadiõudusunenägusid.

Tee edasi: Olek, tugi ja kuidas valmistuda

2023. aasta lõpu seisuga on @define-mixin ettepanek CSS-i töörühma spetsifikatsiooni varajases staadiumis. See tähendab, et see pole veel üheski brauseris saadaval. Veebistandardite protsess on hoolikas ja koostööl põhinev, kaasates brauseritootjaid, spetsifikatsioonide toimetajaid ja ülemaailmset arendajate kogukonda.

Praegune olek ja kuidas kursis püsida

Ettepanek on osa 'CSS Nesting and Scoping' funktsioonide grupist. Saate selle edenemist jälgida, hoides silma peal ametlikul CSSWG GitHubi repositooriumil ja aruteludel veebistandardite foorumites. Ettepaneku küpsedes liigub see toimetaja mustandist töömustandiks ja lõpuks näeme brauserites eksperimentaalseid implementatsioone funktsioonilipu taga.

Kas saate seda täna kasutada?

Kuigi te ei saa @define-mixin'i otse brauseris kasutada, saate süntaksit täna kasutada tööriistade nagu PostCSS kaudu. Plugin nagu `postcss-mixins` võimaldab teil kirjutada mixin'eid väga sarnase süntaksiga, mis seejärel kompileeritakse teie kompileerimisprotsessi käigus standardseks CSS-iks. See on suurepärane viis oma koodi tulevikukindlaks muutmiseks ja mustriga harjumiseks, oodates natiivset brauserituge.

Valmistumine mixin'ite-põhiseks tulevikuks

Isegi ilma natiivse toeta saavad arendajad ja meeskonnad hakata valmistuma:

• Tuvastage korduvus: Auditeerige oma olemasolevaid koodibaase, et tuvastada korduvaid deklaratsioonimustreid. Need on peamised kandidaadid mixin'itele.
• Võtke omaks komponendipõhine mõtteviis: Mõelge oma stiilidest korduvkasutatavate mustrite ja süsteemide terminites. See arhitektuuriline nihe sobib ideaalselt mixin'ite taga oleva filosoofiaga.
• Püsige kursis: Jälgige CSS-i töörühma võtmeisikuid ja brauserite arendajate suhete meeskondi sotsiaalmeedias ja blogides, et saada uusimaid uuendusi implementatsiooni oleku kohta.

Kokkuvõte: Paradigma nihe CSS-i arhitektuuris

@define-mixin'i kasutuselevõtt on tõenäoliselt üks olulisemaid täiustusi CSS-i keeles aastate jooksul. See käsitleb otseselt põhivajadust abstraktsiooni ja korduvkasutatavuse järele, milleks arendajad on tuginenud välistele tööriistadele. Tuues selle funktsionaalsuse brauserisse, astume suure sammu võimsama, elegantsema ja tööriistaketist sõltumatuma tuleviku suunas CSS-i jaoks.

Natiivsed mixin'id lubavad lihtsustada meie töövooge, vähendada meie sõltuvust kompileerimisvahenditest, alandada uute arendajate sisenemisläve ja lõpuks võimaldada meil ehitada robustsemaid ja hooldatavamaid kasutajaliideseid. See esindab CSS-i keele küpsemist, tunnistades kaasaegsete veebirakenduste keerukaid nõudmisi ja pakkudes natiivset, standardiseeritud lahendust. CSS-i tulevik ei seisne ainult uutes omadustes ja väärtustes; see seisneb meie stiilide struktureerimise ja arhitektuuri põhjalikus parandamises. Ja kui @define-mixin on silmapiiril, näeb see tulevik välja uskumatult helge ja hästi organiseeritud.